<template>
  <div style="position: relative">
    <div ref="chart" class="ring-chart" />
    <slot name="tips" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    subTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      chartResizingWithDebounce: debounce(this.chartResizing, 200)

    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    calcTotal() {
      return this.data.reduce((pre, current) => {
        return pre + current.value
      }, 0)
    },
    dataFormat() {
      return this.data.map((item, index) => {
        const { label, value, color } = item
        const percent = parseFloat((value / this.calcTotal * 100).toFixed(2))

        return {
          label,
          value,
          percent,
          color
        }
      })
    },
    generateSeries() {
      let value = 0
      return this.dataFormat.map((item, index) => {
        value += item.percent
        return {
          type: 'bar',
          data: [null, null, null, value],
          coordinateSystem: 'polar',
          z: 9999 - index,
          name: item.label,
          roundCap: true,
          barGap: '-100%',
          color: item.color,
          itemStyle: {
            normal: {
              shadowBlur: 0
            }
          }
        }
      })
    },
    generateOptions() {
      const map = new Map()
      for (const item of this.data) {
        map.set(item.label, item)
      }
      return {
        tooltip: {
          show: true,
          formatter: (params) => {
            const lines = []
            const data = map.get(params.seriesName)
            lines.push(params.seriesName)
            lines.push(`${data.value}人`)
            return lines.join('<br />')
          }
        },
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 100,
          boundaryGap: ['0', '100'],
          startAngle: 90
        },
        radiusAxis: {
          type: 'category',
          data: ['1', '2', '3', '4'],
          z: 10,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          radius: '100%',
          center: ['50%', '50%']
        },
        series: this.generateSeries,
        legend: {
          show: false
        },
        toolbox: {
          show: false
        }
      }
    }
  },
  watch: {
    data: function(data) {
      if (!Array.isArray(data) || data.length <= 0) return []
      this.chart?.setOption?.(this.generateOptions)
    },

    sidebar: {
      immediate: true,
      deep: true,
      handler(n) {
        this.chartResizingWithDebounce()
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.generateOptions)
    window.addEventListener('resize', this.chartResizingWithDebounce)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chartResizingWithDebounce)
    this.chart?.dispose?.()
  },
  methods: {
    chartResizing() {
      this.chart?.resize?.({
        animation: {
          duration: 1500,
          easing: 'elasticOut'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ring-chart {
  width: 100%;
  height: 206px;
  //position: relative;
}
</style>
